<template>
  <div class="bookRecommend">
    <h3>热门推荐</h3>
    <ul>
      <li v-for="book in books" :key="book.id">
        <router-link :to="'/book/' + book.id">
          {{ book.title }}
          <span>{{ currency(factPrice(book.price, book.discount)) }}</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { inject, ref } from 'vue'
import { getHotBooks } from '@/api/api'
interface IhotBook {
  author: string
  bigImgUrl: string
  bookConcern: null
  brief: null
  discount: number
  id: number
  imgUrl: string
  inventory: number
  price: number
  publishDate: null
  title: string
}
const currency: any = inject('currency')
const factPrice: any = inject('factPrice')
const books = ref<IhotBook[]>([])
const getBookHot = async () => {
  const { data } = await getHotBooks()
  // console.log(data)
  books.value = data
  console.log(books)
}
getBookHot()
</script>

<style scoped lang="less">
.bookRecommend {
  width: 300px;
  height: 371px;
  border: solid 1px #ccc;
  margin-top: 10px;
  float: right;
  li {
    list-style: none;
    text-align: left;
    padding-left: 0;
    margin-left: -20px;
  }
}
</style>
